<template>
	<view class="zh-user-center-register">
		<view class="header">
			<image :src="IMG_URL + '/auth/auth_top.jpg'" class="auth-top"/>
			<view class="box">
				<view class="logo">
					<image :src="IMG_URL + '/auth/logo_icon.png'" class="logo-icon"/>
				</view>
				<text class="font-36 font-FFFFFF mt-30 display-block">欢迎注册 中恒e纺</text>	
			</view>
		</view>
		<view class="content">
			<view class="item display-flex align-center">
				<image src="@/static/icons/user_icon.png" class="user-icon"/>
				<input placeholder="输入注册账号（5-20个字符）" class="ml-30 flex" placeholder-class="font-28" v-model="registerData.form.username"/>
			</view>
			<view class="item display-flex justify-between align-center">
				<view class="display-flex align-center flex">
					<image src="@/static/icons/password_icon.png" class="password-icon"/>
					<input placeholder="输入密码（数字+字母，6-12个字符）" :password="!lookPassord" class="ml-30 flex" placeholder-class="font-28" v-model="registerData.form.password"/>
				</view>
				<view @click="handleLookPassword" class="ml-30">
					<image src="@/static/icons/look_active_icon.png" class="look-active-icon" v-if="lookPassord"/>
					<image src="@/static/icons/look_icon.png" class="look-icon" v-else/>
				</view>
			</view>
			<view class="item display-flex justify-between align-center">
				<view class="display-flex align-center flex">
					<image src="@/static/icons/password_sure_icon.png" class="password-sure-icon"/>
					<input placeholder="确认密码" :password="!lookPassordSure" class="ml-30 flex" placeholder-class="font-28" v-model="registerData.repeatPassword"/>
				</view>
				<view @click="handleLookPasswordSrue" class="ml-30">
					<image src="@/static/icons/look_active_icon.png" class="look-active-icon" v-if="lookPassordSure"/>
					<image src="@/static/icons/look_icon.png" class="look-icon" v-else/>
				</view>
			</view>
			<view class="register-btn">
				<button class="app-primary-button" hover-class="app-primary-button-active" @click="handleRegister">立即注册</button>
			</view>
			<view class="display-flex align-center mt-40">
				<u-checkbox class="agree" :sizePercent="0.9" @change="changeAgree" color="#1769ff"></u-checkbox>
				<view class="font-24 ml-10">
					<text>注册表示您已同意</text>
					<text class="font-1769ff" @click="navigateTo('/pages/auth/protocol')">《服务协议》</text>
					<text>和</text>
					<text class="font-1769ff" @click="navigateTo('/pages/auth/privacy')">《隐私政策》</text>
				</view>
			</view>
			<view class="login font-24">
				<text>已有账号? </text>
				<view hover-class="none" class="font-1769ff" @click="reLaunch('/pages/auth/login')">前往登录</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { auth } from '@/api'
	import { tip } from '@/utils'
	import { useAuthStore } from '@/store/auth'
	import { onNavigationBarButtonTap } from '@dcloudio/uni-app';
	import { IMG_URL } from '@/utils/constant'
	const authStore = useAuthStore()
	
	const lookPassord = ref(false)
	const lookPassordSure = ref(false)
	
	onNavigationBarButtonTap((e:any) => {
		uni.switchTab({
			url:'/pages/index/index'
		})
	})
	
	const handleLookPassword = () => {
		lookPassord.value = !lookPassord.value
		// setTimeout(() => {
		// 	lookPassord.value = !lookPassord.value
		// }, 300)
	}
	
	const handleLookPasswordSrue = () => {
		lookPassordSure.value = !lookPassordSure.value
		// setTimeout(() => {
		// 	lookPassordSure.value = !lookPassordSure.value
		// }, 300)
	}
	
	const registerData:any = reactive({
		repeatPassword:'',
		form: {
			username:'',
			password:'',
		}
	})
	
	const checked = ref(false)
	const changeAgree = (e: any) => {
		checked.value = !checked.value
	}
	
	const handleRegister = () => {
		if(!checked.value) return tip.showToast("请先阅读登录协议！")  
		if(registerData.form.username.length < 5  || registerData.form.username.length > 20) return tip.showToast('请输入5-20个字符（数字+字母）的账号！')
		if(registerData.form.password.length < 6  || registerData.form.password.length > 12) return tip.showToast('请输入6-12个字符（数字+字母）的密码！')
		if(registerData.repeatPassword !== registerData.form.password) return tip.showToast('确认密码与密码不一样，请重新输入')
		tip.confirm('是否确定注册账号?').then((data:any) => {
			auth.register(registerData.form).then(() => {
				tip.showToast('注册成功！')
				auth.login(registerData.form).then((res:any) => {
					const data = res.data
					authStore.setToken(data.access_token)
					authStore.setExpiresIn(data.expires_in)
					authStore.setUserInfo()
					uni.redirectTo({url:'/pages/auth/certify'})
				})
			})
		})
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
	
	const reLaunch = (url:string) => {
		uni.reLaunch({url:url})
	}
	
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.zh-user-center-register {
		//#ifdef APP-PLUS
		width:100%;
		min-height:calc(100% - var(--status-bar-height));
		//#endif
		padding-bottom:80rpx;
		background-color: $uni-bg-card-color;
		.header {
			width:100%;
			height: 396rpx;
			text-align:center;
			background-color: #e5e5e5;
			position: relative;
			.auth-top {
				width: 100%;
				height:396rpx;
				position: absolute;
				top:0;
				left:0;
				right:0;
			}
			.box {
				position:relative;
				padding-top: 94rpx;
				.logo {
					width: 104rpx;
					height: 104rpx;
					background-color: #fff;
					border-radius: 15rpx;
					text-align: center;
					margin: 0 auto;
					.logo-icon {
						width: 72rpx;
						height: 72rpx;
						margin-top:16rpx;
					}
				}	
			}
		}
		.content {
			padding:43rpx 60rpx;
			.item {
				padding:25rpx 0;
				border-bottom: 1rpx solid $uni-border-color;
			}
			.user-icon {
				width: 32rpx;
				height: 35rpx;
			}
			.password-icon, .password-sure-icon {
				width: 30rpx;
				height: 36rpx;
			}
			.look-icon {
				width: 45rpx;
				height: 16rpx;
			}
			.look-active-icon {
				width: 45rpx;
				height: 28rpx;
			}
			.check-box {
				width:30rpx;
				height: 30rpx;
			}
			.register-btn {
				margin-top:78rpx;
				button {
					width:630rpx;
				}
			}
			.login {
				text-align: center;
				margin-top: 122rpx;
			}
			.agree {
				margin-top:-8rpx;
			}
		}
	}
</style>
